<template>
    <div>
        <el-form>
            <el-card class="firstCard bottom10">
                <div class="content" style="margin-bottom: 20px;">
                    <div class="content-top">
                        <p class="title">监测类型</p>
                        <div class="monitor-row" style="posito">
                            <el-button type="primary" class="buttonStyle">保存</el-button>
                            <el-button class="buttonStyle" @click="goBack">返回列表</el-button>
                        </div>
                    </div>
                    <div>
                        <el-radio v-model="monitorType" label="PING">PING</el-radio>
                        <el-radio v-model="monitorType" label="TCP">TCP</el-radio>
                        <el-radio v-model="monitorType" label="UDP">UDP</el-radio>
                    </div>
                </div>
                <div class="content">
                    <p class="title">监测对象</p>
                    <!-- PING -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='PING'">
                        <div class="monitorObj-li removeFormLabelPadding" v-for="(item,index) in PINGList" :key="index">
                            <el-form-item class="marginRight20" label="监控名称：">
                                <el-input v-model="item.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="任务地址：">
                                <el-input v-model="item.addr" placeholder="请输入IP地址或域名地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon :size="20" class="marginBottom18" v-if="index==PINGList.length-1" @click="addMonitorType('PING')">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                    <!-- TCP -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='TCP'">
                        <div class="monitorObj-li removeFormLabelPadding" v-for="(item,index) in TCPList" :key="index">
                            <el-form-item class="marginRight20" label="任务名称：">
                                <el-input v-model="item.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight20" label="主机IP：">
                                <el-input v-model="item.addr" placeholder="请填写应用主机IP地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="TCP端口：">
                                <el-input v-model="item.port" placeholder="请填写TCP端口，比如web服务端口 8080" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon :size="20" class="marginBottom18" v-if="index==TCPList.length-1" @click="addMonitorType('TCP')">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                    <!-- UDP -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='UDP'">
                        <div class="monitorObj-li removeFormLabelPadding"  v-for="(item,index) in UDPList" :key="index">
                            <el-form-item class="marginRight20" label="任务名称：">
                                <el-input v-model="item.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight20" label="主机IP：">
                                <el-input v-model="item.addr" placeholder="请填写应用主机IP地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="UDP端口：">
                                <el-input v-model="item.port" placeholder="请填写UDP端口，比如web服务端口 8080" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon :size="20" class="marginBottom18" v-if="index==UDPList.length-1" @click="addMonitorType('UDP')">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p>监测节点</p>
                </div>
                <div class="content2">
                    <div class="monitor-point">
                        <el-radio-group v-model="monitorNode" @change="monitorNodeChange">
                            <el-radio-button label="自定义监测节点" style="font-size: 14px;"></el-radio-button>
                            <el-radio-button label="我的监测节点组" style="font-size: 14px;"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="monitor-checkbox" v-if="monitorNode=='自定义监测节点'">
                        <el-checkbox-group v-model="customNodeCheckedList">
                            <p v-for="item in customNodeList" :key="item">
                                <el-checkbox :label="item.id">{{item.label}}</el-checkbox>
                            </p>
                        </el-checkbox-group>
                    </div>
                    <div v-if="monitorNode=='我的监测节点组'">
                        <transferIndex v-model="defaultData" keyName='rule_name' :rightCheckedData='rightCheckedData' :propData='propData'></transferIndex>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p>监测参数</p>
                </div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">Package：</p>
                            <el-input-number class="width80 marginRight30" v-model="package1" controls-position="right" :min="1" :max="10"></el-input-number>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">Ping次数：</p>
                            <el-input-number class="width80 marginRight6" v-model="pingTimes" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label marginRight30">次</p>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">Ping间隔：</p>
                            <el-input-number class="width80 marginRight6" v-model="pingInterval" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">超时时间：</p>
                            <el-input-number class="width80 marginRight6" v-model="overtime" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label marginRight30">s</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">traceroute监测：</p>
                            <el-switch v-model="isOpenTraceroute" active-color="#0391FE" inactive-color="#DCDFE6"></el-switch>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">最大跳跃数：</p>
                            <el-input-number class="width80 marginRight30" v-model="jumpNum" controls-position="right" :min="1" :max="10"></el-input-number>
                        </div>
                        <div class="input-box">
                            <p class="input-label marginRight4">超时时间：</p>
                            <el-input-number class="width80 marginRight6" v-model="overtime" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label">s</p>
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 监测周期 TCP -->
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p>监测周期</p>
                </div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4"><span class="opacity0">一</span> 有效期：</p>
                            <el-select v-model="monitorCycle" placeholder="" style="width:106px;margin-right: 26px;padding: 0;">
                                <el-option v-for="item in monitorCycleOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="input-box monitor-select">
                            <el-date-picker v-model="monitorCycleTime" prefix-icon="el-icon-date" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">监测频率：</p>
                            <el-select v-model="monitorFreq" placeholder="" style="width:106px;margin-right: 6px;padding: 0;">
                                <el-option v-for="item in monitorFreqOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p style="margin-right: 46px;">告警设置</p>
                    <p style="font-weight: normal;">开启告警：<el-switch v-model="isOpenWarning" active-color="#0391FE" inactive-color="#DCDFE6"></el-switch>
                    </p>
                </div>
                <div class="title1" style="border: none;margin-bottom: 0;">
                    <p>告警条件</p>
                </div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">取样间隔：</p>
                            <el-radio v-model="dynamicFreq" label="1">动态频率</el-radio>
                            <el-select v-model="dynamicFreqValue" placeholder="" style="width:80px;margin-right: 6px;padding: 0;">
                                <el-option v-for="item in dynamicFreqOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <p class="input-label">频率</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">性能指标：</p>
                            <el-select v-model="performance" placeholder="" style="width:106px;margin-right: 6px;padding: 0;">
                                <el-option v-for="item in performanceOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4 opacity0">取样间隔：</p>
                            <div class="warning-box">
                                <p>0ms</p>
                                <p class="warning-text">
                                    <svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #1CD689;">正常</span></p>
                                <p>
                                    <el-input v-model="warningGrade1" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input>
                                </p>
                                <p>ms</p>
                                <p class="warning-text">
                                    <svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #F1AD46;">普通警告</span></p>
                                <p>
                                    <el-input v-model="warningGrade2" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input>
                                </p>
                                <p>ms</p>
                                <p class="warning-text">
                                    <svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #FF5252;">严重警告</span></p>
                                <p>
                                    <el-input v-model="warningGrade3" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input>
                                </p>
                                <p>ms</p>
                            </div>
                        </div>
                    </div>
                    <div class="monitor-row" style="margin-bottom: 20px;">
                        <p class="input-label marginRight4 opacity0">取样间隔：</p>
                        <el-button type="primary" plain class="add-button">添加条件</el-button>
                    </div>
                </div>
                <div class="title1" style="border: none;margin-bottom: 0;">
                    <p>告警通知</p>
                </div>
                <div class="content1">
                    <div style="display: flex;">
                        <div class="notice-li">
                            <p class="notice-label">邮件通知：</p>
                            <p class="notice-cont" v-for="(item, index) in form.QQAddrList" :key="index">
                                <el-input v-model="item.value" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon :size="20" v-if="index == form.QQAddrList.length - 1" @click="addNoticeAddr('QQ')">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                        <div class="notice-li">
                            <p class="notice-label">钉钉通知：</p>
                            <p class="notice-cont" v-for="(item, index) in form.DDAddrList" :key="index">
                                <el-input v-model="item.value" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon :size="20" v-if="index == form.DDAddrList.length - 1" @click="addNoticeAddr('DD')">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                        <div class="notice-li">
                            <p class="notice-label">微信通知：</p>
                            <p class="notice-cont" v-for="(item, index) in form.WXAddrList" :key="index">
                                <el-input v-model="item.value" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon :size="20" v-if="index == form.WXAddrList.length - 1" @click="addNoticeAddr('WX')">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p>设置异常点状态值</p>
                </div>
                <div class="content1">
                    <div class="monitor-row" style="margin-bottom: 30px;">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">网络延时高于：</p>
                            <el-input-number class="width100 marginRight30" v-model="abnormalNetwork" controls-position="right" :min="1" :max="10"></el-input-number>
                        </div>
                        <!-- PING -->
                        <div class="input-box setInputNumberPadding" v-if="monitorType=='PING'">
                            <p class="input-label marginRight4">丢包率高于或等于：</p>
                            <el-input-number class="width100 marginRight6" v-model="abnormalPack" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                        <!-- PING -->
                        <div class="input-box setInputNumberPadding" v-if="monitorType=='PING'">
                            <p class="input-label marginRight4">抖动延时高于：</p>
                            <el-input-number class="width100 marginRight6" v-model="abnormalShake" controls-position="right" :min="1" :max="10"></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <el-button type="primary" class="buttonStyle">保存</el-button>
                        <el-button class="buttonStyle" @click="goBack">返回列表</el-button>
                    </div>
                </div>
            </el-card>
        </el-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
import { useRouter } from 'vue-router';
import { CirclePlus } from '@element-plus/icons';
import ETable from 'comps/eTable/index.vue';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import TransferIndex from 'comps/transfer/index.vue';
export default defineComponent({
    name: 'configurationTask',
    components: { ETable, CirclePlus, SvgIcon, TransferIndex },
    setup() {
        const router = useRouter();
        let monitorType = ref('PING');
        let monitorNode = ref('自定义监测节点');
        let switchValue = ref(true);
        let data = reactive({
            PINGList: [{
                id: 1,
                name: '',
                addr: ''
            }],
            TCPList: [{
                id: 1,
                name: '',
                addr: '',
                port: ''
            }],
            UDPList: [{
                id: 1,
                name: '',
                addr: '',
                port: ''
            }],
            customNodeList: [
                //自定义监测节点
                {
                    id: 1,
                    label: '选项一'
                },
                {
                    id: 2,
                    label: '选项二'
                }
            ],
            customNodeCheckedList: [], //选中的自定义监测节点
            monitorCycle: '一天内',//监测周期
            monitorCycleOptions: [
                {
                    value: '一天内'
                },
                {
                    value: '三天内'
                }
            ],
            monitorCycleTime: null,
            monitorFreq: 1,//监测频率
            monitorFreqOptions: [
                { value: 1 }, { value: 2 }
            ],
            dynamicFreq: true, //动态频率
            dynamicFreqValue: 1,
            dynamicFreqOptions: [
                { value: 1 }, { value: 2 }
            ],
            performance: 1,//性能指标
            performanceOptions: [
                { value: 1 }, { value: 2 }
            ],
            package1: 2, //Package
            pingTimes: 2, //ping次数
            pingInterval: 2, //ping间隔
            overtime: 2, //超时时间
            jumpNum: 2,
            isOpenTraceroute: true, //是否打开traceroute监测
            isOpenWarning: true, //是否开启告警
            warningGrade1: 1, // 正常
            warningGrade2: 1, // 普通警告
            warningGrade3: 1, // 严重警告

            abnormalNetwork: 1, // 异常点状态值 网络延时
            abnormalPack: 1,    // 异常点状态值 丢包率
            abnormalShake: 1    // 异常点状态值 抖动延时
        });
        let form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            QQAddrList: [
                { value: '' }
            ],
            DDAddrList: [
                { value: '' }
            ],
            WXAddrList: [
                { value: '' }
            ]
        });
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        const monitorNodeChange = (value: String) => {
            console.log(monitorNode);
        };
        const addMonitorType = (type:String) => {
            if(type == 'PING'){
                data.PINGList.push({
                    id: 1,
                    name: '',
                    addr: ''
                })
            }else if(type = 'TCP'){
                data.TCPList.push(
                    {
                        id: 1,
                        name: '',
                        addr: '',
                        port: ''
                    }
                );
            }else if(type = 'UDP'){
                data.UDPList.push(
                    {
                        id: 1,
                        name: '',
                        addr: '',
                        port: ''
                    }
                );
            }
        }
        const addNoticeAddr = (mode: String) => {
            if(mode == 'QQ'){
                form.QQAddrList.push(
                    { value: '' }
                )
            }else if(mode == 'DD'){
                form.DDAddrList.push(
                    { value: '' }
                )
            }else{
                form.WXAddrList.push(
                    { value: '' }
                )
            }
        }
        watch(
            () => data.customNodeCheckedList,
            (n: any) => {
                console.log(n);
            }
        );
        // 返回列表
        const goBack = () => {
            router.go(-1);
        };
        return {
            form,
            monitorType,
            monitorNode,
            switchValue,
            inputChange,
            monitorNodeChange,
            addMonitorType,
            addNoticeAddr,
            ...toRefs(data),
            goBack
        };
    }
});
</script>

<style lang="scss" scoped>
.firstCard {
    --el-card-padding: 20px 20px 2px 20px;
}
.title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 14px;
}
.content-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: -5.2px;
}
.monitorObj-li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.title1 {
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    p {
        font-size: 14px;
        font-weight: bold;
    }
}
.content1 {
    margin-left: 20px;
}
.content2 {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.monitor-checkbox {
    .el-checkbox-group {
        padding: 10px 16px;
        border: 1px solid #ebeef5;
        display: flex;
        flex-wrap: wrap;
        p {
            width: 200px;
        }
    }
}
.monitor-row {
    display: flex;
    margin-bottom: 18px;
}
.monitor-row:last-child {
    margin-bottom: 0;
}
.monitor-point {
    margin-bottom: 10px;
}
.width80 {
    width: 80px;
}
.width100 {
    width: 100px;
}
.width120 {
    width: 120px;
}
.width300 {
    width: 300px;
}
.input-box {
    display: flex;
}
.input-label {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.marginRight4 {
    margin-right: 4px;
}
.marginRight6 {
    margin-right: 6px;
}
.marginRight10 {
    margin-right: 10px;
}
.marginRight20 {
    margin-right: 20px;
}
.marginRight30 {
    margin-right: 30px;
}
.marginBottom18 {
    margin-bottom: 18px;
}
.warning-box {
    display: flex;
    height: 32px;
    padding-bottom: 20px;
    p {
        width: auto;
        margin-right: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        position: relative;
    }
    input {
        text-align: center;
    }
}
.warning-text {
    span {
        display: inline-block;
        width: 100%;
        position: absolute;
        top: 30px;
        text-align: center;
    }
}
.add-button {
    width: 90px;
    height: 32px;
    font-size: 14px;
    background: #fff;
    padding: 0;
    line-height: 1.5;
}
.buttonStyle {
    width: 90px;
    height: 32px;
    font-size: 14px;
    padding: 0;
    line-height: 1.5;
}
.notice-li {
    width: 330px;
    .notice-label {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    .notice-cont {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    p:last-child {
        margin-bottom: 0px;
    }
}
//用于占位，元素不在页面上显示
.opacity0 {
    opacity: 0;
    color: #fff;
}
</style>
<style lang="scss">
.removeFormLabelPadding {
    label {
        padding: 0 6px 0 0;
    }
}
.setCardPadding {
    .el-card__body {
        padding: 20px 0;
    }
}
.monitor-select .el-radio {
    margin-right: 12px;
}
.monitor-select input {
    padding: 0 30px 0 6px;
    padding-right: 30px !important;
}
.monitor-point {
    .el-radio-button__inner {
        font-size: 14px;
        padding: 8.1px 15px;
    }
}
.warning-box input {
    padding: 0 6px;
    padding-right: 6px !important;
}
.setInputNumberPadding {
    .el-input-number.is-controls-right .el-input__inner {
        padding-left: 5px;
        padding-right: 40px;
    }
}
.input-box .warning-box input {
    text-align: center;
}
</style>